import React, { useEffect, useState } from 'react'

export default function Useeffect() {

    //状态  hook
    let [count,setCount]=useState(1);
    // add 自增
    let add=()=>{
        setCount(++count);
    }

    //  模拟生命周期  相当于  componentDidMount组件完成挂载执行  和 compoentDidUpdate组件在更新时
    useEffect(()=>{
        console.log('componentDidMount组件完成挂载执行  和 compoentDidUpdate');
    })
    //  可以调用多次
    //  模拟生命周期  只模拟 componentDidMount
    useEffect(()=>{
        console.log('只模拟 componentDidMount');
    },[count])

    //模拟生命周期  单独模拟 componetWillUnmount
    //记得加参数【】
    useEffect(()=>{
        return ()=>{
            console.log('单独模拟 componetWillUnmount,组件将要卸载了~~~');
        }
    },[])

  return (
    <>
        <h1>学习 [函数式]组件中的 ---useEffect() ---  hook</h1>
        <h2>{count}</h2>
        <button onClick={add}>点击自增</button>
    </>
  )
}
